<page-header [title]="null"></page-header>
<nz-card [nzBordered]="false">
  <div nz-row>
    <div nz-col [nzXs]="24" [nzSm]="8" class="header-info">
      <!--  我的待办-->
      <span class="text-grey-dark">{{ 'my.todo' | translate }}</span>
      <!-- 8个任务 -->
      <span class="d-block display-2">{{ 'eight.tasks' | translate }}</span>
      <em></em>
    </div>
    <div nz-col [nzXs]="24" [nzSm]="8" class="header-info">
      <!-- 本周任务平均处理时间 -->
      <span class="text-grey-dark">{{ 'average.task.processing.time.of.the.week' | translate }}</span>
      <!-- 32分钟 -->
      <span class="d-block display-2">32{{ 'TimedTask.Label.CronExpression.Minute' | translate }}</span>
      <em></em>
    </div>
    <div nz-col [nzXs]="24" [nzSm]="8" class="header-info">
      <!-- 本周完成任务数 -->
      <span class="text-grey-dark">{{ 'number.of.tasks.completed.this.week' | translate }}</span>
      <!-- 24个任务 -->
      <span class="d-block display-2">{{ 'twentyFour.tasks' | translate }}</span>
    </div>
  </div>
</nz-card>
<nz-card [nzBordered]="false">
  <div class="d-flex align-items-center mb-lg">
    <!-- 标准列表 -->
    <h3 class="flex-1 text-lg">{{ 'menu.list.basiclist' | translate }}</h3>
    <div>
      <nz-radio-group [(ngModel)]="q.status" class="mr-md">
        <label nz-radio-button [nzValue]="'all'">
          <!-- 全部 -->
          <span>{{ 'store.all' | translate }}</span>
        </label>
        <label nz-radio-button [nzValue]="'progress'">
          <!--进行中  -->
          <span>{{ 'pm.project.archives.start.Have.in.hand' | translate }}</span>
        </label>
        <label nz-radio-button [nzValue]="'waiting'">
          <!-- 等待中 -->
          <span>{{ 'waiting' | translate }}</span>
        </label>
      </nz-radio-group>
      <nz-input-group nzSuffixIcon="anticon anticon-search" style="width: 270px;">
        <input type="text" nz-input placeholder="{{ 'placeholder' | translate }}" [(ngModel)]="q.q" name="q" />
      </nz-input-group>
    </div>
  </div>
  <button nz-button (click)="openEdit()" [nzType]="'dashed'" nzBlock class="mb-sm">
    <i nz-icon type="plus"></i>
    <!-- 添加 -->
    <span>{{ 'add' | translate }}</span>
  </button>
  <nz-list [nzDataSource]="data" [nzLoading]="loading" [nzRenderItem]="item" [nzPagination]="pagination">
    <ng-template #item let-item>
      <nz-list-item [nzContent]="nzContent" [nzActions]="[edit, op]">
        <ng-template #edit>
          <!-- 编辑 -->
          <a (click)="openEdit(item)">{{ 'edit' | translate }}</a>
        </ng-template>
        <ng-template #op>
          <nz-dropdown>
            <a class="ant-dropdown-link" nz-dropdown>
              <!--  更多-->
              {{ 'menu.more' | translate }}
              <i nz-icon type="down"></i>
            </a>
            <ul nz-menu>
              <!-- 编辑 -->
              <li nz-menu-item (click)="openEdit(item)">{{ 'edit' | translate }}</li>
              <!-- 删除 -->
              <li nz-menu-item (click)="msg.success('删除：' + item.title)">{{ 'table.delete' | translate }}</li>
            </ul>
          </nz-dropdown>
        </ng-template>
        <nz-list-item-meta [nzTitle]="nzTitle" [nzDescription]="item.subDescription" [nzAvatar]="nzAvatar">
          <ng-template #nzTitle>
            <a href="{{ item.href }}" target="_blank">{{ item.title }}</a>
          </ng-template>
          <ng-template #nzAvatar>
            <nz-avatar [nzSrc]="item.logo" nzSize="large" [nzShape]="'square'"></nz-avatar>
          </ng-template>
        </nz-list-item-meta>
        <ng-template #nzContent>
          <div class="width-md">
            <div class="d-flex text-grey-dark">
              <div class="flex-1">
                Owner
                <p>{{ item.owner }}</p>
              </div>
              <div class="text-right">
                <!--开始时间  -->
                {{ 'contract.start.date' | translate }}
                <p>{{ item.createdAt | _date }}</p>
              </div>
            </div>
            <nz-progress [nzPercent]="item.percent" [nzStatus]="item.status" [nzStrokeWidth]="6"></nz-progress>
          </div>
        </ng-template>
      </nz-list-item>
    </ng-template>
    <ng-template #pagination>
      <nz-pagination [nzTotal]="50" [nzPageSize]="5" (nzPageIndexChange)="getData()"></nz-pagination>
    </ng-template>
  </nz-list>
</nz-card>
